/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-21 19:13:33
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';
import {
  mainBgColorWhite,
  px2dp,
  fontColorBlack,
} from '@/styles';
import { FormSelect, FormInput, Button } from '@/common';

const { Submit } = Button;

export default class Quotation extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    const { activeTab, onChange, showPicker, applicationInsurance } = this.props;
    return (
      <View style={[styles.wrap]}>
        <View style={styles.header}>
          <TouchableOpacity
            style={[
              styles.leftBG,
              activeTab == 1
                ? { backgroundColor: '#EBEDF2' }
                : { backgroundColor: '#FFFFFF' },
            ]}
            activeOpacity={0.8}
            onPress={() => onChange('activeTab', 1)}
          >
            <View
              style={[
                styles.left,
                activeTab == 1
                  ? {
                    backgroundColor: '#FFFFFF',
                    borderTopRightRadius: px2dp(30),
                  }
                  : {
                    backgroundColor: '#EBEDF2',
                    borderBottomRightRadius: px2dp(30),
                  },
              ]}
            >
              <Text
                style={[styles.title, activeTab == 1 && { fontWeight: 'bold' }]}
              >
                有号牌车险报价
              </Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            style={[
              styles.rightBG,
              activeTab == 2
                ? { backgroundColor: '#EBEDF2' }
                : { backgroundColor: '#FFFFFF' },
            ]}
            activeOpacity={0.8}
            onPress={() => onChange('activeTab', 2)}
          >
            <View
              style={[
                styles.right,
                activeTab == 2
                  ? {
                    backgroundColor: '#FFFFFF',
                    borderTopLeftRadius: px2dp(30),
                  }
                  : {
                    backgroundColor: '#EBEDF2',
                    borderBottomLeftRadius: px2dp(30),
                  },
              ]}
            >
              <Text
                style={[styles.title, activeTab == 2 && { fontWeight: 'bold' }]}
              >
                无号牌车险报价
              </Text>
            </View>
          </TouchableOpacity>
        </View>
        <View style={styles.content}>
          {activeTab == 1
            ? this._renderHavePlate()
            : this._renderHaveNotPlate()}
        </View>

        <View style={{ alignItems: 'center' }}>
          <Submit
            text='下一步'
            boxStyle={{
              width: px2dp(620),
              height: px2dp(82),
              borderRadius: px2dp(41),
              overflow: 'hidden',
              marginVertical: px2dp(32),
              backgroundColor: '#FB8404',
            }}
            btnStyle={{}}
            btnTextStyle={{
              fontSize: px2dp(36),
            }}
            onClick={() => {
              applicationInsurance();
            }}
          />
        </View>
      </View>
    );
  }

  _renderHavePlate = () => {
    const { showPicker, onChange, carNo, carType, insureLinkMan, insureLinkPhone } = this.props;
    return (
      <>
        <FormSelect
          style={{ height: px2dp(104) }}
          label='车辆种类'
          labelWidth={{ width: px2dp(310) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请选择'
          iconVisible
          required
          selected={{ value: carType }}
          onPress={() => {
            showPicker();
          }}
        />
        <FormSelect
          style={{ height: px2dp(104) }}
          label='车牌号或发动机号'
          labelWidth={{ width: px2dp(300) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请输入车牌号或发动机号'
          iconVisible={false}
          required
          selected={{ value: carNo }}
          onPress={() => { onChange('isVisible', true); }}
        />
        <FormInput
          style={{ height: px2dp(104) }}
          label='投保联系人'
          labelWidth={{ width: px2dp(300) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请输入投保联系人'
          defaultValue={insureLinkMan}
          inputType={1}
          onChange={(val) => { onChange('insureLinkMan', val); }}
          keyboardType='default'
          required
        />
        <FormInput
          style={{ height: px2dp(104) }}
          label='联系方式'
          labelWidth={{ width: px2dp(300) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请输入联系方式'
          defaultValue={insureLinkPhone}
          inputType={1}
          onChange={(val) => { onChange('insureLinkPhone', val); }}
          maxLength={11}
          keyboardType='number-pad'
          required
        />
      </>
    );
  };

  _renderHaveNotPlate = () => {
    const { showPicker, onChange, carNo, carType, insureLinkMan, insureLinkPhone } = this.props;
    return (
      <>
        <FormSelect
          style={{ height: px2dp(104) }}
          label='车辆种类'
          labelWidth={{ width: px2dp(310) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请选择'
          iconVisible
          required
          selected={{ value: carType }}
          onPress={() => {
            showPicker();
          }}
        />
        <FormInput
          style={{ height: px2dp(104) }}
          label='车牌号或发动机号'
          labelWidth={{ width: px2dp(300) }}
          textStyles={{ textAlign: 'left', color: fontColorBlack }}
          placeholder='请输入车牌号或发动机号'
          defaultValue='新车无号牌'
          inputType={1}
          disabled
          required
        />
        <FormInput
          style={{ height: px2dp(104) }}
          label='投保联系人'
          labelWidth={{ width: px2dp(300) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请输入投保联系人'
          defaultValue={insureLinkMan}
          inputType={1}
          onChange={(val) => { onChange('insureLinkMan', val); }}
          required
        />
        <FormInput
          style={{ height: px2dp(104) }}
          label='联系方式'
          labelWidth={{ width: px2dp(300) }}
          textStyles={{ textAlign: 'left' }}
          placeholder='请输入联系方式'
          defaultValue={insureLinkPhone}
          inputType={1}
          onChange={(val) => { onChange('insureLinkPhone', val); }}
          maxLength={11}
          keyboardType='number-pad'
          required
        />
      </>
    );
  };
}
const styles = StyleSheet.create({
  wrap: {
    width: px2dp(702),
    backgroundColor: mainBgColorWhite,
    borderRadius: px2dp(24),
    overflow: 'hidden',
    top: px2dp(-122),
  },
  header: {
    display: 'flex',
    width: '100%',
    flexDirection: 'row',
  },
  leftBG: {
    width: px2dp(351),
    height: px2dp(88),
    backgroundColor: '#EBEDF2',
  },
  rightBG: {
    width: px2dp(351),
    height: px2dp(88),
    backgroundColor: '#FFFFFF',
  },
  left: {
    width: '100%',
    height: '100%',
    textAlign: 'center',
    // borderTopRightRadius: px2dp(30),
    backgroundColor: '#FFFFFF',
  },
  right: {
    width: '100%',
    height: '100%',
    // borderBottomLeftRadius: px2dp(30),
    backgroundColor: '#EBEDF2',
  },
  title: {
    color: fontColorBlack,
    textAlign: 'center',
    lineHeight: px2dp(88),
  },
  content: {
    paddingHorizontal: px2dp(32),
  },
});
